<template>
	<view class="box">
		<view class="container">
			<view class="title">产品信息</view>
			<view class="name">
				<view class="tabclass">产品名称</view>
				<view>{{productData.goodsName}}</view>
			</view>
			<view class="name">
				<span>产品卖点</span>
				<view class="button">
					<view class="left" v-if="orderSale">{{ orderSale }}</view>
					<view class="right" v-if="orderSaleData">{{ orderSaleData }}</view>
				</view>
			</view>
			<view class="name">
				<view class="tabclass" >产品规则</view>
				<view>{{productData.goodsRule}}</view>
			</view>
			<view class="name">
				<span>产品备注</span>
				<text>{{productData.remake}}</text>
			</view>
			<view class="name">
				<span>产品主图</span>
				<image :src="productData.mainImg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {detailsGoods} from "@/apis/detailsGoods.js"
	export default {
		data() {
			return {
				productData:{},
				orderSale:'',
				orderSaleData:'',
				// buttonLeft:'',
				// buttonRight:''
			}
		},
		onLoad(val) {
			// console.log('valvalval',val.goodsId)
			detailsGoods(val.goodsId)
			.then((res)=>{
				if(res.code==200){
					this.productData = res.data;
					// this.buttonLeft = productData.sellPoint.split(',')[0];
					// this.buttonRight = productData.sellPoint.split(',')[1];
					this.orderSale = this.productData.sellPoint.split(",")[0];
					this.orderSaleData = this.productData.sellPoint.split(",")[1]
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 750rpx;
		height: 100vh;
		background-color: #F0EFF4;
		padding: 32rpx;
		box-sizing: border-box;
		.container{
			width: 100%;
			min-height: 970rpx;
			background-color: white;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			.title{
				width: 100%;
				height: 50rpx;
				font-size: 34rpx;
				font-weight: 1000;
				text-align: center;
				line-height: 50rpx;
				margin-bottom: 30rpx;
			}
			.name{
				width: 100%;
				min-height: 50rpx;
				display: flex;
				// align-items: center;
				font-size: 25rpx;
				font-weight: 1000;
				margin-bottom: 50rpx;
				.tabclass{
					width: 130rpx;
					height: 100%;
					margin-right: 45rpx;
					white-space: nowrap;
				}
				span{
					margin-right: 60rpx;
				}
				image{
					width: 430rpx;
					height: 400rpx;
				}
				.button{
					height: 100%;
					width: 270rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left ,.right{
						width: 48%;
						height: 100%;
						text-align: center;
						line-height: 40rpx;
						border: 1rpx solid #F66973;
						border-radius: 8rpx;
						font-size: 22rpx;
						color: #F66973;
					}
				}
			}
		}
	}

</style>
